<template>
	<div>
		<div class="rongqi1280">
			<el-card class="box-card" style="min-height: 300px;">
				<div>
					<div>
						<p style="color: #929292;padding: 6px 0;"><span>用户留言</span></p>
						<div class="p_" v-for="(v,i) in list.list" :key="i">
							<p><span>{{v.username}}</span>：<span>{{v.content}}</span><span style="position: absolute;right: 0;color: #929292;font-size: 14px;">{{v.create_time}}</span></p>
							<p v-if="list.username==v.username" class="right_s" style="text-align: right;"><span @click="xiugai(v,i)">修改</span><span @click="shanchu(v,i)">删除</span></p>
						</div>
					</div>
					<div style="display: flex;width: 100%;padding: 10px 0;">
						<el-input v-model="list.input" placeholder="请输入留言内容"></el-input>
						<el-button style='color: #fff;' color='#279c55' @click="fabu">发表留言</el-button>
					</div>
				</div>
			</el-card>
		</div>
		<!-- 修改弹框 -->
		<el-dialog align-center v-model="list.show" title="修改留言">
			<el-form>
				<el-form-item label="留言内容" label-width="150px">
					<el-input v-model="list.content" autocomplete="off" />
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="list.show = false">取消</el-button>
					<el-button type="primary" @click="xg">确定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
	import {
		ElMessage,ElMessageBox
	} from 'element-plus'
	import {
		reactive,onMounted
	} from 'vue'
	import {
		useRouter
	} from 'vue-router'
	const router = useRouter()
	let list = reactive({
		index:'',
		input:'',
		content:'',
		username:localStorage.getItem('USERNAME'),
		list:[
		],
		show:false
	})
	onMounted(()=>{
		GetList()
	})
	// 获取留言列表
	let GetList = ()=>{
		// list.USERNAME = localStorage.getItem('USERNAME')
		console.log(list.username)
		list.input = ''
	}
	// 发布留言
	let fabu = ()=>{
		let username = localStorage.getItem('USERNAME')
		let time = new Date()
		let params = {
			username:username,
			content:list.input,
			create_time:time.toLocaleString()
		}
		list.list.push(params)
		list.input = ''
	}
	// 删除
	let shanchu = (v,i)=>{
		list.list.splice(i,1)
	}
	// 修改
	let xiugai = (v,i)=>{
		list.index = i
		list.content = v.content
		list.show = true
	}
	// 点击修改
	let xg = ()=>{
		list.list[list.index].content = list.content
		list.show = false
	}
</script>

<style scoped>
	.wzxq {
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
	}
	.fanhui{
		position: absolute;
		left: 0;
		font-weight: bold;
		font-size: 18px;
		cursor: pointer;
	}
	.p_{
		position: relative;
		padding: 10px 0;
		border-bottom: 1px solid #f1f1f1;
	}
	.right_s{
		text-align: right;
	}
	.right_s span{
		cursor: pointer;
		font-size: 14px;
	}
	.right_s span:nth-child(1){
		color: #67C23A;
		margin-right: 20px;
	}
	.right_s span:nth-child(2){
		color: #F56C6C;
	}
</style>